<template>
  <div class="memberadd">
    <div class="card">
      <img
        src="../../assets/images/208.png"
        alt=""
      >
    </div>
    <div class="content">
      <img
        src="../../assets/images/207.png"
        alt=""
      >
      <h3>锁定推广用户</h3>
      <p>二维码锁定用户的中心消费利润（消费额1%）</p>
      <h3>自购省钱 分享赚钱</h3>
      <p>商城里的商品自购省钱，分享赚钱</p>
      <h3>超值VIP商品价</h3>
      <p>更低价的惊喜优惠</p>
      <h3>VIP回馈活动</h3>
      <p>更低价的惊喜优惠</p>
    </div>
    <div class="submit">
      <button>成为会员</button>
    </div>

  </div>
</template>
<script>
import myHeader from "../header/index.vue";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {}
};
</script>
<style lang="scss">
.memberadd {
  width: 100%;

  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  background: url("../../assets/images/209.png") no-repeat;
  background-size: 100% 100%;
  .card {
    width: 95%;
    margin: 10px auto;
    img {
      width: 100%;
    }
  }
  .content {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 150px;
    }
    h3 {
      color: rgba(51, 51, 51, 1);
      font-weight: bold;
      font-size: 16px;
      padding-bottom: 15px;
    }
    p {
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      padding-bottom: 15px;
    }
  }
  .submit {
    width: 90%;
    margin: 0 auto;
    button {
      border: none;
      outline: none;
      width: 100%;
      height: 40px;
      background: linear-gradient(
        90deg,
        rgba(40, 40, 40, 1),
        rgba(71, 71, 71, 1),
        rgba(40, 40, 40, 1)
      );
      box-shadow: 0px 4px 10px 0px rgba(48, 48, 47, 0.5);
      border-radius: 40px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 2px;
    }
  }
}
</style>

